<template>
	<view class="calendar-content">
		<view>
			<!-- 插入模式 -->
			<uni-calendar :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		</view>
	</view>
</template>

<script>
	import {
		formatTimeNowYMD
	} from '@/common/util/util.js'
	import uniCalendar from '@/components/uni-ui/uni-calendar/uni-calendar.vue'
	import {
		getDataThree
	} from '@/common/api/point.js'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				showCalendar: false,
				info: {
					date: '2019-08-15',
					startDate: '2019-12-12',
					endDate: '2119-12-12',
					lunar: true,
					range: true,
					insert: false,
					selected: []
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'userId'])
		},
		async onLoad() {
			this.initData()
		},
		methods: {
			async initData() {
				const req = {
					userId: this.userId
				}
				const res = await getDataThree(req)
				if (res.length > 0) {
					let tmp = []
					for (let item in res) {
						let d = {
							date: '',
							info: '签到'
						}
						d.date = res[item].date
						tmp.push(d)
					}
					this.info.selected = tmp
					console.log(this.info.selected)
				}
			},
			change(e) {
				console.log('change 返回:', e)

			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>

<style>

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}
</style>
